<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <link rel="stylesheet" href="https://at.alicdn.com/t/font_3246975_r7ow77w0bdn.css"> -->
		<!-- <script src="http://localhost:3000/js/1.js"></script> -->
	</head>
	<body>
		<!-- <i class="iconfont icon-liwu"></i>
		<br>
		<img src="https://img12.360buyimg.com/pop/s1180x940_jfs/t1/104805/26/39280/98308/644a2a45F773e22c3/d354ed7911cbd091.jpg.avif" alt=""> -->
	</body>
	<script>
		// 同源策略:同源策略（Same origin policy）是一种约定,它是浏览器最核心也最基本的安全功能,由客户端访问某一个服务器的文件时，如果发起请求的这个来源与进行响应的目标的源不一致，目标源出于安全的角度，将拒绝这次访问
		
		// 同源策略限制了从一个源(网站)加载的文档或脚本如何与来自另一个源(网站)的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
		// 协议名、域名、端口，这三项都相同，则被称为同源。
		// 三项中只要有一项不同，则被称为跨源。
		
		// 跨域测试前提:
		// 一个服务器(Hbuilder http://127.0.0.1:8848)前端  访问另一个服务器 (express http://192.168.51.23:3000)的后端
		// 访问报错: Acess to XMLHttpRequest at 'http://192.168.51.23:3000/grades/all' from origin 'http://127.0.0.1:8848' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
		// 从 (Hbuilder http://127.0.0.1:8848) 向 http://192.168.51.23:3000/grades/all 发送的XMLHttpRequest 被CORS协议拒绝了
		// CORS  跨域资源共享策略
		
		// 跨源访问也叫做跨域访问。
		
		
		// 在实际开发过程中 -> 跨域场景还是比较常见的 (微信支付,支付宝支付,短信 => 第三方)
		// 真实开发中，很多场景下会涉及到跨域访问，比如百度网站就特别大，其中有mp3.baidu.com、image.baidu.com、tieba.baidu.com等等，而			其中一些数据或服务是需要共用的，所以就需要跨域访问。
		
		// 再比如支付系统，各个电商网站都提供支付宝或微信付款，这个就需要用到支付宝或微信的接口，所以这也是跨域访问。
		
		
		// 可以跨域,但是要得到对方服务器的允许  
		// 1. 配置CORS   => 对方服务器配置CORS  
		   
		   
		// 2. jsonp   => 原理: 引入资源不受同源策略影响 (当使用link->css  script->js  img -> 图片 =>不受同源策略的影响 ) => 卡bug
			
		// a. 对方服务器接口返回  函数调用格式的字符串 
		// b. 前端用script标签载入该接口文件  => 向该接口发送请求 =>  接口返回函数调用格式的字符串 "fn(10)"  => 会被script脚本解析为函数调用 // c. 需要提前对应函数名封装函数
		
		// 前端: 1. 提前对应函数名封装函数    2.  前端用script向该接口发送请求
		// 后端: 3. 接收前端发送的请求 => 返回函数调用格式的字符串的字符串 
		// 前端: 4. script标签接口返回的函数调用格式的字符串的字符串   => 将其解析为JS代码 => 函数调用
		
		// jsonp
		// 1. jsonp不是ajax请求(不需要6行代码), 通过script向对应接口发送请求  => 代码结构比较简单
		// 2. 请求速度较快 -> get(script标签载入外部文件时都是get)
		
		// 缺点:
		// 1. 需要后端(我方的/跨域->对方)配合
		// 2. jsonp只能改写get请求 => 不适用于post类型的接口
		
	function haha(data){
		console.log("函数执行了",data);
	}
		
		
	</script>
	<!-- 向该接口发送请求 =>  接口返回函数调用格式的字符串 "fn(10)" -->
	<!-- type="text/javascript"  => 将标签内的文本作为js语法解析   => fn(10)  -->
	<script type="text/javascript" src="http://localhost:3000/grades/all/jsonp?cb=haha">
		// fn(10)
		// fn({})
	</script>
	
</html>